<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="fonts/icomoon.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/index.js"></script>
    <script src="./echarts的学习/node_modules/echarts/dist/echarts.js"></script>
    <script src="./echarts的学习/china.js"></script>
</head>

<body>
    <div class="container">
        <!-- 第一列 -->
        <div class="column">
            <!-- 1.1 数据概览 -->
            <div class="panel overview">
                <div class="inner">
                    <div class="numtop">
                        <span>2,190</span>
                        <span>190</span>
                        <span>3,001</span>
                        <span>108</span>
                    </div>
                    <div class="txtbottom">
                        <span><i class="icon-dot" style="color: #006cff;"></i>设备总数</span>
                        <span><i class="icon-dot" style="color: #6acca3;"></i>季度新增</span>
                        <span><i class="icon-dot" style="color: #6acca3;"></i>运营设备</span>
                        <span><i class="icon-dot" style="color: #ed3f35;"></i>异常设备</span>
                    </div>
                </div>
            </div>
            <!-- 1.2 故障/异常 设备监控 -->
            <div class="panel monitor">
                <div class="inner">
                    <!-- tab栏切换 页签 -->
                    <div class="tabs">
                        <a href="javascript:void(0)">故障设备监控</a>
                        <a href="javascript:void(0)" class="active">异常设备监控</a>
                    </div>
                    <!-- tab栏切换 页面1 -->
                    <div class="content" >
                        <div class="head">
                            <span>异常时间</span>
                            <span>异常地址</span>
                            <span>异常代码</span>
                        </div>
                        <div class="carousel">
                            <ul>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211001</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211002</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211003</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211004</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211005</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211006</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211007</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211008</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211009</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>2110010</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>2110011</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>2110012</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>2110013</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>2110014</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>2110015</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211001</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211002</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211003</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211004</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211005</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211006</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211007</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211008</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>211009</span></li>
                                <li><span>20210520</span><span>广东省深圳市宝安区创维创新谷B座南区4楼410</span><span>2110010</span></li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- tab栏切换 页面2 -->
                    <div class="content" style="display: none;" >
                        <div class="head">
                            <span>异常时间</span>
                            <span>异常地址</span>
                            <span>异常代码</span>
                        </div>
                        <div class="carousel">
                            <ul>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111001</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111002</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111003</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111004</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111005</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111006</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111007</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111008</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111009</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>1110010</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>1110011</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>1110012</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>1110013</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>1110014</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>1110015</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111001</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111002</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111003</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111004</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111005</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111006</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111007</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111008</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>111009</span></li>
                                <li><span>20210521</span><span>传智教育黑马程序员深圳校区前端学科71期小可爱</span><span>1110010</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 1.3 点位分布统计 -->
            <div class="panel point">
                <div class="inner">
                    <p>点位分布统计</p>
                    <div class="echarts">
                        <!-- 左边饼图 -->
                        <div class="pie"></div>
                        <!-- 右边data -->
                        <div class="data">
                            <div class="item">
                                <p>320,11</p>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35;"></i>
                                    点位分布
                                </span>
                            </div>
                            <div class="item">
                                <p>418</p>
                                <span>
                                    <i class="icon-dot" style="color:#eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二列 -->
        <div class="column">
            <!-- 2.1 设备数据统计 -->
            <div class="map">
                <h3><span class="icon-cube"></span>设置数据统计</h3>
                <div class="echarts">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 2.2 全国用户总量统计 -->
            <div class="panel user">
                <div class="inner">
                    <p>全球用户总量统计</p>
                    <div class="echarts">
                        <!-- 左边条形图   条形（bar） -->
                        <div class="bar"></div>
                        <!-- 右边data -->
                        <div class="data">
                            <div class="item">
                                <p>120,5999</p>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35;"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <p>248</p>
                                <span>
                                    <i class="icon-dot" style="color:#eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第三列 -->
        <div class="column">
            <!-- 3.1 订单量 -->
            <div class="panel order">
                <div class="inner">
                    <!-- 头部导航 -->
                    <div class="head">
                        <a href="javascript:void(0)" class="active">365天</a>
                        <span></span>
                        <a href="javascript:void(0)">90天</a>
                        <span></span>
                        <a href="javascript:void(0)">30天</a>
                        <span></span>
                        <a href="javascript:void(0)">24小时</a>
                    </div>
                    <!-- data内容 -->
                    <div class="data">
                        <div class="item">
                            <b>301,987</b>
                            <span>
                                <i class="icon-dot" style="color:#ed3f35"></i>
                                订单量
                            </span>
                        </div>
                        <div class="item">
                            <b>99834</b>
                            <span>
                                <i class="icon-dot" style="color:#eacf14;"></i>
                                销售额(万元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 3.2 销售额统计 -->
            <div class="panel sales">
                <div class="inner">
                    <div class="head">
                        <h3>销售额统计</h3>
                        <span class="active">年</span>
                        <span>季</span>
                        <span>月</span>
                        <span>周</span>
                    </div>
                    <div class="echarts">
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 3.3 渠道分布/一季度销售进度 -->
            <div class="clearfix">
                <!-- 左边 渠道分布 -->
                <div class="panel fl hannel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="content">
                            <div class="item"><b>39</b><small>%</small><span><i class="icon-plane"></i> 机场</span></div>
                            <div class="item"><b>28</b><small>%</small><span><i class="icon-bag"></i> 商城</span></div>
                            <div class="item"><b>20</b><small>%</small><span><i class="icon-bus"></i> 地铁</span></div>
                            <div class="item"><b>13</b><small>%</small><span><i class="icon-train"></i> 火车站</span></div>
                        </div>
                    </div>
                </div>
                <div class="panel fr hannel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="echarts">
                            <div class="loop"></div>
                            <div class="num"><b>75</b><small>%</small></div>
                        </div>
                        <div class="data clearfix">
                            <div class="quota">
                                <p>1,321</p>
                                <span><i class="icon-dot" style="color:#6acca3"></i>销售额</span>
                            </div>
                            <div class="quota">
                                <p>150%</p>
                                <span><i class="icon-dot" style="color:#ed3f2e"></i>同比增长</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 3.4 全国热榜 -->
            <div class="panel hot">
                <div class="inner">
                    <!-- 左边全国热榜 -->
                    <div class="all fl">
                        <p>全国热榜</p>
                        <div class="data">
                            <ul class="icon1">
                                <li><i class="icon-cup1" style="color:#d93f36"></i>可爱多</li>
                                <li><i class="icon-cup2" style="color:#68d8fe"></i>娃哈哈</li>
                                <li><i class="icon-cup3" style="color:#4c9bfd"></i>小洋人</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 右边各省热销 -->
                    <div class="province fr ">
                        <h3 class="clearfix">
                            <b class="fl">各省热销</b>
                            <i class="fr">// 近30日 //</i>
                        </h3>
                        <div class="data">
                            <ul class="fl">
                                <li class="active"><span>北京</span><b>25,179</b><i class="icon-up"></i></li>
                                <li><span>河北</span><b>25,252</b><i class="icon-down"></i></li>
                                <li><span>上海</span><b>34,456</b><i class="icon-up"></i></li>
                                <li><span>江苏</span><b>23,234</b><i class="icon-down"></i></li>
                                <li><span>曹县</span><b>56,456</b><i class="icon-up"></i></li>
                            </ul>
                            <ul class="fr">
                                <li><span>好多鱼</span><b>2,170</b><i class="icon-up"></i></li>
                                <li><span>可爱多</span><b>9,086</b><i class="icon-up"></i></li>
                                <li><span>娃哈哈</span><b>8,341</b><i class="icon-up"></i></li>
                                <li><span>喜之郎</span><b>7,987</b><i class="icon-up"></i></li>
                                <li><span>七喜</span><b>4,876</b><i class="icon-up"></i></li>
                                <li><span>小洋人</span><b>3,876</b><i class="icon-up"></i></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>